<template>
  <div class="student-wrapper">
    <h1>学生信息列表</h1>
    <div v-for="e in studentList" :key="e.index">
      <StudentItem :index= "e.index" :age="e.age" :name="e.name" :major="e.major" :num="e.num" :address="e.address" :score="e.score" :hobby="e.hobby"/>
      <!-- <button @click="listStudentDetail(e)">查看学生详情</button> -->
      <RouterLink class="link"
          :to="{ path:'/student/student-detail', query:{...e}}">
          查看学生详情
       </RouterLink>   
       <!-- 触发路由 -->
    </div>
  
  <div class="student-detail">
    <RouterView></RouterView>  
    <!-- //二级展示区 -->
  </div>
</div>
</template>

<script lang="js" setup name="Student">
import { useRouter } from 'vue-router';
import StudentItem from './StudentItem.vue';
import { RouterLink, RouterView } from 'vue-router';


let studentList = [
  {index: 1, name: '张三', age: 19, major: '软件工程', num: 2024117712, address:'江苏省', score: 85, hobby:'打游戏'},
  {index: 2, name: '李四', age: 18, major: '计算机科学', num: 2025345452, address:'浙江省', score: 65, hobby:'唱歌'},
  {index: 3, name: '王五', age: 20, major: '数据科学', num: 2023873782, address:'吉林省', score: 78, hobby:'画画'}

]
//路由传参 两种模式
// 第一种 querystring 传参
// 被引入方 ：  student.vue
 //参数router.push('/student-detail?a=项王&b=19&c=software')

//   ？开始，紧跟需要传递的参数 key=value的形式 &连接
//  ?name=${student.name}&age=${student.age}

// 接收
// 1。引入方studentlistdetail需要引入路由 useRoute
// 2. 调用useroute函数获取route对象
// const route = useRoute
//用法
//表格中引用参数设为{{route.query.name}}
// 简化写法 解构赋值

// let { query } = route   一级路由写法 略有问题
//引用参数可简化为{{query.name}}

// 第二种 params 传参 必须写到路径中去 
// router.push('/student-detail/${student.name}/${student.age}')
// 会被当成路由去处理 解决方法 定义路径时 {path:'/student-detail/:name/:age'}
// 若有一个可选参数 {path:'/student-detail/:name/:age/:id?'}
// 要按照路由定义的顺序传参

//使用时 {{route.params.xxx}}

//结构赋值

// let { params } = route

// 如果用routerlink这种方式跳转 params有坑 
// 另一种写法 定义路由规则时用name 使用
// <RouterLink
// :to="{ name: 'student-detail',params:{name:e.name, age: e.age, }}"
// > 与定义顺序不相关
// 也可以结构赋值 params:{..e}

const router = useRouter()

function listStudentDetail(student){
  // query方式
  router.push(`/student-detail?num=${student.num}&address=${student.address}&score=${student.score}&hobby=${student.hobby}`)  
  //params方式
  //  router.push(`/student-detail/${student.num}/${student.address}/${student.score}/${student.hobby}`)
}
</script>

<style lang="css">
.student-wrapper {
  border: 1px solid #000;
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 20px;

}
.link {
  display: inline-block;
  width: 100px;
  height: 30px;
  background-color: #103b92;
  border-radius: 4px ;
  text-decoration: none;
  text-align: center;
  line-height: 30px;
  font-size: 13px;
  color: #ebebeb;

}
.student-detail {
  border: 1px solid #000;
}
span {
  margin: 0 20px;
  overflow: hidden;
}
</style>